<template>
  <div class="header">
    <div class="left">
      <el-icon class="menu-icon" @click="toggleSidebar">
        <Expand v-if="isCollapse" />
        <Fold v-else />
      </el-icon>
      <breadcrumb />
    </div>
    <div class="right">
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="avatar-container">
          <el-avatar 
            :size="32"
            :src="userInfo.avatarUrl"
            fit="cover"
          >
            {{ userInfo.nickname?.[0]?.toUpperCase() || 'U' }}
          </el-avatar>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="settings">系统设置</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { Expand, Fold, ArrowDown } from '@element-plus/icons-vue'
import { getUserInfo, getUserAvatar } from '@/api/user'
import Breadcrumb from './Breadcrumb.vue'

const router = useRouter()
const store = useStore()
const isCollapse = ref(false)
const userInfo = ref({
  nickname: '',
  avatarUrl: ''
})

const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

const fetchUserAvatar = async () => {
  try {
    const userId = store.getters['user/userId']
    if (!userId) {
      console.error('未找到用户ID')
      return
    }

    const response = await getUserAvatar()
    console.log('Avatar API Response:', response)
    if (response?.code === 200 && response.data) {
      store.dispatch('user/updateAvatar', response.data)
      userInfo.value = {
        ...userInfo.value,
        avatarUrl: response.data
      }
      console.log('Avatar URL:', response.data)
    }
  } catch (error) {
    console.error('获取用户头像失败:', error)
  }
}

const fetchUserInfo = async () => {
  try {
    const response = await getUserInfo()
    if (response?.success && response.data) {
      userInfo.value = response.data
      store.commit('user/SET_USER_INFO', response.data)
      await fetchUserAvatar()
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      // 处理登出逻辑
      break
  }
}

onMounted(async () => {
  const userId = store.getters['user/userId']
  console.log('Current userId:', userId)
  if (!userId) {
    console.error('未找到用户ID，无法获取头像')
    return
  }
  await fetchUserInfo()
  console.log('Current userInfo:', userInfo.value)
})
</script>

<style lang="scss" scoped>
.header {
  height: 50px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: #fff;

  .left {
    display: flex;
    align-items: center;
    gap: 20px;

    .menu-icon {
      font-size: 20px;
      cursor: pointer;
      color: var(--el-text-color-regular);

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .right {
    .avatar-container {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: var(--el-fill-color-light);
      }
      
      .el-avatar {
        background-color: var(--el-color-primary);
        color: #fff;
        object-fit: cover;
        width: 32px;
        height: 32px;
      }
      
      .el-icon {
        margin-left: 4px;
        font-size: 12px;
        color: var(--el-text-color-regular);
      }
    }
  }
}
</style> 